<template>
	<view>
		<view style="margin: 80rpx auto; width: 280rpx;    filter: drop-shadow(0px 0px 14px #000);"><image src="../../static/image/logo.png" mode="widthFix" style="width: 280rpx;height: 86.12rpx;"></image></view>
		<text style="text-align: center;color: #aaaaaa;font-weight: 510;">用户登陆</text>
		<form @submit="formSubmit">
			<view class="uni-form-item verify_container">
				<view class="image_container"><image src="../../static/image/cellphone.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input" name="username" placeholder="请输手机号" />
			</view>
		
			<view class="uni-form-item">
				<view class="verify_container">
					<view class="image_container"><image src="../../static/image/auth.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
					<input class="uni-input short" name="verify_code" placeholder="请输入验证码" />
				</view>
				<button type="primary" size="mini">发送验证码</button>
			</view>
			<view class="uni-form-item verify_container">
				<view class="image_container"><image src="../../static/image/lock.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input" password="true" name="username" placeholder="请输密码" />
			</view>
			<view class="uni-form-item verify_container">
				<view class="image_container"><image src="../../static/image/lock.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input" password="true"  name="username" placeholder="请再次输入密码" />
			</view>
			<button class="submit_btn" form-type="submit" type="primary">提交</button>
			<navigator class="login" url="../login/index" hover-class="navigator-hover"><text type="default">返回登陆 →</text></navigator>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			var formdata = e.detail.value;
			uni.showModal({
				content: '表单数据内容：' + JSON.stringify(formdata),
				showCancel: false
			});
		}
	}
};
</script>

<style>
page {
	background-color: white;
}
.uni-form-item {
	display: flex;
	width: 80%;
	margin: 60rpx auto 0;
	height: 72rpx;
	
}
.verify_container{
	display: flex;
	border: solid 1rpx #cccccc;
	border-radius: 10rpx;
	height: 72rpx;
}
.uni-form-item button{
	height: 72rpx;
	width: 200rpx;
	line-height: 72rpx;
	margin-left: 30rpx;
}

.uni-form-item .image_container {
	width: 100rpx;
	text-align: center;
	line-height: 80rpx;
	height: 72rpx;
	border-radius: 10rpx 0 0 10rpx;
}
.uni-form-item .auth_container {
	width: 70%;
}
.uni-form-item image {
	margin-left: 10rpx;
}
.uni-form-item input {
	background-color: white;
	height: 68rpx;
	width: 100%;
	padding-left: 20rpx;
	border-radius: 0 10rpx 10rpx 0;
	border-left: 1px solid #cccccc;
}

.submit_btn{
	width: 80%;
	height: 72rpx;
	margin-top: 30rpx;
	line-height: 72rpx;
}
.login {
	float: right;
	margin-right: 10%;
	font-size: 30rpx;
	color: #409eff;
}
</style>
